<template>
	<view class="distributor_recruit_container">
		<view class="distributor_recruit_box">
			<!-- 顶部 -->
			<view class="top_box">
				<view class="top_img_box">
					<u-loading mode="flower" v-if="showImgLoading"></u-loading>
					<image :src="posterShowImg" mode="" class="top_img" :show-menu-by-longpress="true" v-else></image>
				</view>
			</view>

			<!-- 底部 -->
			<view class="bottom_box">
				<!-- <view class="bottom_copywriting_box">
					<view class="copywriting_icon_box">
						<image src="/static/shop/Copywritingicon-.png" mode="" class="copywriting_icon"></image>
					</view>
					<view class="copywriting_title">
						更换文案
					</view>
				</view>
				<view class="copywriting_input_box">
					<view class="copywriting_input">
						{{ copywritingTitle }}
					</view>
					<view class="refresh_icon_box" @click="handleCopy(copywritingTitle)">
						<image src="/static/shop/icon-copy-shop.png" mode="" class="refresh_icon"></image>
					</view>
					<view class="refresh_icon_box" @click="handleRefresh">
						<image src="/static/shop/icon-refresh.png" mode="" class="refresh_icon"></image>
					</view>
				</view> -->

				<view class="bottom_components_box">
					<view class="components_icon_box">
						<image src="/static/my/icon-components.png" mode="" class="components_icon"></image>
					</view>
					<view class="components_title">
						选择模板
					</view>
				</view>

				<view class="components_img_box">
					<view class="components_img_all" v-for="(item,index) in shopImgList" :key="index"
						@click="handleComponents(item, index)">
						<image :src="item.img" mode="" class="components_img"></image>

						<view class="mask" v-if="isActive == index"></view>
						<view class="right_icon_box" v-if="isActive == index">
							<image src="/static/my/icon-right.png" mode="" class="right_icon"></image>
						</view>
					</view>
				</view>

				<view class="share_box">
					<!-- 	<view class="share_all" @click="handleShare('微信好友')" style="position: relative;">
						<view class="share_img_box">
							<image src="/static/home/icon-wx.png" mode="" class="share_img"></image>
						</view>
						<view class="share_title">
							微信好友
						</view>
							<button open-type="share" style="position: absolute;top: 0;left: 0; height: 126rpx;opacity: 0;">
							微信好友
						</button>
					</view> -->


					<!-- <view class="share_all" @click="handleShare('朋友圈')" style="position: relative;">
						<view class="share_img_box">
							<image src="/static/home/icon-pyq.png" mode="" class="share_img"></image>
						</view>
						<view class="share_title">
							朋友圈
						</view>
					</view> -->


					<view class="share_all" @click="handleShare('保存本地')" style="position: relative;">
						<view class="share_img_box">
							<image :src="saveIcon" mode="" class="share_img"></image>
						</view>
						<view class="share_title">
							保存本地
						</view>
					</view>


					<view class="share_all" @click="handleShare('复制链接')" style="position: relative;">
						<view class="share_img_box">
							<image :src="copyUrlIcon" mode="" class="share_img"></image>
						</view>
						<view class="share_title">
							复制链接
						</view>
					</view>
				</view>
			</view>
			<u-toast ref="uToast" />
		</view>
	</view>
</template>

<script>
	import parseQueryString from '@/utils/interceptUrl.js'
	export default {
		data() {
			return {
				wxFriendIcon: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66f7a782114d9_1727506306.png',
				wxFriendAllIcon: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66f7a762ccf6f_1727506274.png',
				saveIcon: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66f7a774ecb69_1727506292.png',
				copyUrlIcon: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66f7a75607448_1727506262.png',
				shopImgList: [],
				isActive: 0,
				pageObj: {
					pageNow: 1,
					pageSize: 50
				},
				posterObj: {},
				posterShowImg: '',
				posterShowShareImg: '',
				timesTamp: '',
				promotionSahreUrl: '',
				share: {
					title: '我的小店',
					path: '', //页面路径
					imageUrl: '', //页面图，可自定义
				},
				showImgLoading: false
			}
		},
		onLoad() {
			this.timesTamp = Date.parse(new Date())
			this.getPosterList()
		},
		// 分享好友
		onShareAppMessage(res) {
			if (res.from === 'button') {
				console.log('来自页面内分享按钮');
			}
			return {
				title: this.share.title,
				path: this.share.path,
				imageUrl: this.share.imageUrl,
				success(res) {
					console.log('分享成功');
				},
				fail(res) {
					console.log('分享失败');
				}
			};
		},

		// 分享朋友圈
		onShareTimeline(res) {
			return {
				title: this.share.title,
				path: this.share.path,
				imageUrl: this.share.imageUrl,
				success(res) {
					uni.showToast({
						title: '分享成功',
						icon: 'success'
					})
				},
				fail(err) {
					uni.showToast({
						title: '分享失败',
						icon: 'error'
					})
				}
			}
		},
		methods: {
			// 获取海报
			getPosterList() {
				let token = uni.getStorageSync('h5-token')
				let isAgent = uni.getStorageSync('h5-isAgent')
				uni.request({
					url: 'https://saler.jkcae.com/app/api/getPosterList?type=' + 3 + '&status=' + 1 +
						'&page_now=' + this.pageObj.pageNow + '&page_size=' + this.pageObj.pageSize,
					method: 'GET',
					header: {
						Authorization: token,
						Platform: isAgent == 0 ? 2 : 1
					},
					success: res => {
						if (res.data.code == 1) {
							this.shopImgList = res.data.data
							this.posterObj = res.data.data[0]
							this.showImgLoading = true
							this.getSmallShopPoster()
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
							return
						}
					}
				})
			},

			// 创建小店海报
			getSmallShopPoster() {
				let token = uni.getStorageSync('h5-token')
				let isAgent = uni.getStorageSync('h5-isAgent')
				uni.request({
					url: 'https://saler.jkcae.com/app/api/getSmallShopPoster?poster_id=' + this.posterObj.id +
						'&type=' + 1,
					method: 'GET',
					header: {
						Authorization: token,
						Platform: isAgent == 0 ? 2 : 1
					},
					success: res => {
						if (res.data.code == 1) {
							this.showImgLoading = false
							this.posterShowImg = res.data.data + '?v=' + this.timesTamp
							this.posterShowShareImg = res.data.data
							this.promotionSahreUrl = res.data.url
							// this.promotionSahreUrl = '?' + res.data.url
						} else {
							this.showImgLoading = false
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
							return
						}
					}
				})
			},

			// 选择模板
			handleComponents(item, index) {
				this.isActive = index
				this.posterObj = item
				this.getSmallShopPoster()
			},

			// 选择分享
			handleShare(val) {
				const that = this
				if (val == '保存本地') {
					uni.downloadFile({
						url: that.posterShowShareImg,
						success: res => {
							let imagePath = res.tempFilePath;
							uni.saveImageToPhotosAlbum({
								filePath: imagePath,
								success(res) {
									uni.showToast({
										title: '保存成功',
										icon: 'success'
									});
								},
								fail(err) {
									if (err.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
										// 用户拒绝授权  
										uni.showModal({
											title: '提示',
											content: '需要您授权保存图片到相册',
											showCancel: false,
											success(modalRes) {
												// 尝试打开设置页面  
												uni.openSetting({
													success(settingRes) {
														if (settingRes.authSetting[
																'scope.writePhotosAlbum'
															]) {
															// 用户重新授权，再次尝试保存图片  
															uni.saveImageToPhotosAlbum({
																filePath: imagePath,
																success(res) {
																	uni.showToast({
																		title: '保存成功',
																		icon: 'success'
																	});
																},
																fail(err) {
																	uni.showToast({
																		title: '保存失败',
																		icon: 'none'
																	});
																}
															});
														} else {
															// 用户未授权  
															uni.showToast({
																title: '您未授权保存图片到相册',
																icon: 'none'
															});
														}
													}
												});
											}
										});
									} else {
										// 其他错误情况  
										uni.showToast({
											title: '保存失败',
											icon: 'none'
										});
									}
								}
							});
							// uni.saveImageToPhotosAlbum({
							// 	filePath: res.tempFilePath,
							// 	success: function() {
							// 		uni.showToast({
							// 			title: '保存成功，快去分享吧',
							// 			icon: 'none'
							// 		})
							// 	},
							// 	fail(err) {
							// 		uni.showToast({
							// 			title: '下载失败',
							// 			icon: 'none'
							// 		})
							// 	}
							// })
						}
					})
				} else if (val == '复制链接') {
					uni.setClipboardData({
						data: that.promotionSahreUrl,
						success: res => {
							uni.showToast({
								title: '复制链接成功',
								icon: 'none'
							})
						}
					})
				} else if (val == '微信好友') {
					// 换成我的小店页面
					// let originalUrl = that.promotionSahreUrl.split("?")[1]
					// let url = parseQueryString(originalUrl)
					// let agentId = url.agent_id
					// let pid = url.pid
					// let ppid = url.ppid
					// // 换成我的小店页面
					// this.share.path = '/pages/myShop/myShop?agent_id=' + agentId +
					// 	'&pid=' +
					// 	pid + '&ppid=' + ppid

					uni.setClipboardData({
						data: that.promotionSahreUrl,
						success: res => {
							uni.showToast({
								title: '复制链接成功',
								icon: 'none'
							})
						}
					})
				} else if (val == '朋友圈') {
					let originalUrl = that.promotionSahreUrl.split("?")[1]
					let url = parseQueryString(originalUrl)
					let agentId = url.agent_id
					let pid = url.pid
					let ppid = url.ppid
					// 换成我的小店页面
					this.share.path = '/pages/myShop/myShop?agent_id=' + agentId +
						'&pid=' +
						pid + '&ppid=' + ppid
					uni.showToast({
						title: '请点击右上角三个点进行分享朋友圈',
						icon: 'none'
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.distributor_recruit_container {
		background: #7f7f7f;

		.distributor_recruit_box {

			.top_box {
				display: flex;
				justify-content: center;
				padding: 57rpx 0;

				.top_img_box {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 544rpx;
					height: 868rpx;

					.top_img {
						width: 100%;
						height: 100%;
						border-radius: 12rpx;
						-webkit-touch-callout: default; // 要配置这行关键代码，不然可能不生效
					}
				}
			}

			.bottom_box {
				width: 750rpx;
				background: #FFFFFF;

				.bottom_copywriting_box {
					display: flex;
					align-items: center;
					padding: 34rpx 27rpx 0 36rpx;

					.copywriting_icon_box {
						width: 36rpx;
						height: 36rpx;

						.copywriting_icon {
							width: 100%;
							height: 100%;
						}
					}

					.copywriting_title {
						font-size: 30rpx;
						font-family: Source Han Sans CN;
						font-weight: 500;
						color: #333333;
					}
				}

				.copywriting_input_box {
					display: flex;
					align-items: center;
					margin: 28rpx 27rpx 36rpx 36rpx;

					.copywriting_input {
						display: flex;
						align-items: center;
						width: 623rpx;
						height: 70rpx;
						border: 2rpx solid #E6E6E6;
						border-radius: 10rpx;
						font-size: 26rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #808080;
						padding: 5rpx 0 5rpx 30rpx;
					}

					.refresh_icon_box {
						width: 36rpx;
						height: 36rpx;
						margin-left: 26rpx;

						.refresh_icon {
							width: 100%;
							height: 100%;
						}
					}
				}

				.bottom_components_box {
					display: flex;
					align-items: center;
					padding: 20rpx 27rpx 32rpx 36rpx;

					.components_icon_box {
						width: 36rpx;
						height: 36rpx;
						margin-right: 10rpx;

						.components_icon {
							width: 100%;
							height: 100%;
						}
					}

					.components_title {
						font-size: 30rpx;
						font-family: all-font;
						font-weight: 500;
						color: #333333;
					}
				}

				.components_img_box {
					display: flex;
					// width: 100%;
					overflow-x: scroll;
					margin: 0 37rpx 0;

					.components_img_all {
						position: relative;
						margin-right: 19rpx;

						.components_img {
							width: 175rpx;
							height: 279rpx;
							border-radius: 12rpx;
						}

						.mask {
							width: 100%;
							/* 遮罩层宽度与容器等宽 */
							height: 100%;
							/* 遮罩层高度与容器等高 */
							background-color: rgba(0, 0, 0, 0.5);
							/* 设置背景色及透明度 */
							position: absolute;
							/* 将遮罩层放置于容器内部 */
							top: 0;
							left: 0;
							border-radius: 12rpx;
						}

						.right_icon_box {
							position: absolute;
							top: 10rpx;
							right: 12rpx;
							width: 40rpx;
							height: 40rpx;

							.right_icon {
								width: 100%;
								height: 100%;
							}
						}
					}
				}

				.share_box {
					display: flex;
					justify-content: space-evenly;
					padding-bottom: 26rpx;

					.share_all {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;

						.share_img_box {
							width: 82rpx;
							height: 82rpx;
							margin: 33rpx 0 21rpx;

							.share_img {
								width: 100%;
								height: 100%;
							}
						}

						.share_title {
							font-size: 30rpx;
							font-family: all-font;
							font-weight: 400;
							color: #333333;
						}
					}
				}
			}
		}
	}
</style>